<script>
import BookApi from "../../api/book";
import BookSearch from "../../components/book/BookSearch.vue";
import MyPagination from "../../components/MyPagination.vue";
import AvgRanking from "../../components/bookshelves/AvgRanking.vue";

export default {
  components: {
    BookSearch,
    MyPagination,
    AvgRanking
  },
  data() {
    return {
      bookList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1
    };
  },
  methods: {
    async getBookList(limit = -1, offset = -1) {
      try {
        let orderBy = "created_time";
        let sort = "DESC";
        const api = new BookApi();
        let res = await api.findAll(limit, offset, orderBy, sort);
        this.bookList = res.data;
        console.log(this.bookList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async getCount() {
      try {
        const api = new BookApi();
        let res = await api.getCount();
        this.total = res.data.total;
        console.log(this.total);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async searchResult(data) {
      this.bookList = data;
    },
    goto(page) {
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getBookList(this.limit, this.offset);
    }
  },
  async mounted() {
    this.curPage = 1;
    this.limit = this.pageSize;
    this.offset = 0;
    await this.getCount();
    await this.getBookList(this.limit, this.offset);
  }
};
</script>

<template>
  <div class="book-list">
    <div class="header">
      <my-pagination
        :total="total"
        :page-size="pageSize"
        :cur-page="curPage"
        :show-info="true"
        @goto="goto"
      />
      <book-search @search-result="searchResult"></book-search>
    </div>
    <div class="block">
      <ul>
        <li v-for="book in bookList" :key="book.id">
          <div class="book">
            <img :src="book.pic" :alt="book.title" referrerpolicy="no-referrer" />
            <p>
              <span class="title"
                ><router-link :to="'/book/' + book.id">{{ book.title }}</router-link></span
              >
              <span class="author">{{ book.author }}</span>
              <span class="isbn">{{ book.isbn }}</span>
            </p>
          </div>
          <div class="related">
            <avg-ranking :book-id="book.id" />
          </div>
        </li>
        <li>
          <router-link to="/book/add" class="a-img"></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* li {
  list-style-type: none;
  flex: auto;
  min-width: 25%;
  max-width: 25%;
  display: flex;
} */

li {
  list-style-type: none;
  box-sizing: border-box;
  flex: 0 1 calc(25% - 16px);
  min-width: calc(25% - 16px);
  max-width: 100%;
  background-color: rgba(92, 92, 92, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8px;
  padding: 16px;
  border-radius: 16px;
}

li:hover{
  background-color: rgba(120, 110, 255, 0.3);
}

li .book{
  display: flex;
}

li img {
  width: 120px;
  height: 165px;
}

li p {
  margin-left: 8px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

li p span {
  margin-top: 5px;
}

li:last-of-type {
  background-color: #fff;
}

li:last-of-type .a-img {
  display: inline-block;
  width: 100%;
  height: 165px;
  background: url(@/assets/add-one.svg) no-repeat center center/80px;
}

li:last-of-type .a-img:hover {
  display: inline-block;
  width: 100%;
  height: 165px;
  background: url(@/assets/add-one-hover.svg) no-repeat center center/80px;
}
</style>
